<template>
  <div class="w-[1150px] p-12 print-style relative bg-white">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="tableData[0]?.zydh" class="w-60 text-right pr-2 mt-5" />
    </div>
    <div class="text-center text-[22px] font-bold">{{ tableData[0]?.qrzt }}</div>

    <div class="flex justify-between item-center mt-5">
      <div>
        <div class="mb-3">目标仓库：{{ tableData[0]?.rkckmc }}</div>
        <div>出库仓库：{{ tableData[0]?.ckckmc }}</div>
      </div>
      <div>
        <div class="mb-3">接收人：{{ tableData[0]?.lqr }}</div>
        <div>出库人：{{ tableData[0]?.qrr }}</div>
      </div>
      <div>
        <div class="mb-3">出库日期：{{ tableData[0]?.ckrq }}</div>
        <div>制单时间：{{ tableData[0]?.createTime }}</div>
      </div>
    </div>

    <div class="flex-1 mt-4">
      <div class="flex justify-between border border-solid items-center border-x-0 py-3">
        <div class="flex-1">药品名称</div>
        <div class="flex-1">规格</div>
        <div class="flex-1">出库数量</div>
        <div class="flex-1">批号</div>
        <div class="flex-1">零售价</div>
        <div class="flex-1">零售金额</div>
        <div class="flex-1">有效期</div>
        <div class="flex-1">厂家</div>
        <div class="flex-1">产地</div>
      </div>
      <div
        v-for="(item, index) in tableData"
        :key="item"
        class="flex justify-between border border-dashed border-t-0 items-center border-x-0 py-2"
        :class="{ 'border-0 mt-2.5': tableData.length <= 1 || index + 1 === tableData.length }"
      >
        <div class="flex-1">{{ item.mc }}</div>
        <div class="flex-1">{{ item.gg }}</div>
        <div class="flex-1">{{ item.cksl }}</div>
        <div class="flex-1">{{ item.ph }}</div>
        <div class="flex-1">{{ item.lsdj }}</div>
        <div class="flex-1">{{ item.lsje }}</div>
        <div class="flex-1">{{ item.yxq }}</div>
        <div class="flex-1">{{ item.cj }}</div>
        <div class="flex-1">{{ item.cd }}</div>
      </div>
    </div>
    <div class="pt-5 mt-4 border border-solid border-x-0 border-b-0">
      <div class="flex items-center">
        <div style="margin-right: 532px">合计：</div>
        <div>{{ tableData[0]?.zje }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})

const tableData = ref([])

watch(
  () => props.params,
  () => {
    if (props.params?.printData?.detail?.length > 0) {
      tableData.value = props.params?.printData?.detail
    }
  }
)
</script>
<style lang="less" scoped></style>
